Text with Marker

How to use

import { icon } from "react-openlayers7";

icon.marker = "/images/marker-basic.png";
icon.selected = "/images/marker-selected.png";

const App = () => {
  // ...
};

marker-basic.png
marker-selected.png

Marker 를 사용하기 위해선 어플리케이션 최상단에 사용할 이미지를 설정해야 합니다.
위 링크를 통해 예시 이미지들을 다운받고 설정해주세요.

Live Editor

<div>
  <MapContainer center={[126.840884, 35.190816]} width="100%" height="500px">
    <CustomMarker center={[126.840884, 35.190816]}>
      <InnerText>Marker</InnerText>
    </CustomMarker>
  </MapContainer>
</div>

Result

icon.png를 사용한 마커입니다. Map 컴포넌트 하위에 사용하여 지도위에 표시할 수 있습니다.
InnerText 컴포넌트를 자식으로 넣어 텍스트를 표시할 수 있습니다(Marker 들은 자식으로 InnerText 컴포넌트 한개만을 받을 수 있습니다.)

Text with Marker

How to use​

How to use